import React, { useEffect, useState, useRef, useMemo } from 'react';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { StyleSheet, TouchableOpacity, View, Text, Image, TextInput, Button, Alert, TouchableHighlight } from 'react-native';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';

import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import HomeRequest from '../../../request/homeRequest.ts';
import CustomFlatList from '../../../component/CustomFlatList.tsx';
import { useReactive } from 'ahooks';
import { Badge, Actionsheet, useDisclose, Stack, Center, ScrollView, TextArea } from 'native-base';
import { useToast } from 'react-native-toast-notifications';
import Tools from '../../../utils/Tools.ts';
import NoticeBar from '../../../component/NoticeBar.tsx';
import { Rating, AirbnbRating } from 'react-native-ratings';

interface IOrderEvaluateProps {
  navigation: NavigationProp<any, 'orderEvaluate'>;
  route: RouteProp<{ orderEvaluate: any }, 'orderEvaluate'>;
}

interface IData {
  content: string;
  iconName: string;
  textArr: string[];
  phname: string;
  remark: string;
  rateVal: number;
}

const OrderEvaluate: React.FC<IOrderEvaluateProps> = ({ navigation, route }) => {
  const data = useReactive<IData>({
    content: '提交评价或者建议，鼓励服务员和商家做得更好',
    iconName: 'volume-2',
    textArr: ['提前点送达', '态度不好', '送达超时', '送错产品', '仪表不整洁', '送达不通知'],
    phname: '告诉服务员，激励我们做得更好',
    remark: '',
    rateVal: 0,
  });

  useEffect(() => {}, []);

  const memoNoticeBar = useMemo(() => <NoticeBar content={data.content} iconName={data.iconName} isScroll={true}></NoticeBar>, []);

  return (
    <ScrollView>
      {memoNoticeBar}
      <View style={styles.main}>
        <View style={styles.waiterView}>
          <View style={[styles.flexView,{justifyContent:'space-between'}]}>
            <Text style={{color:'#000'}}>您对服务员满意吗？</Text>
            <Text style={{color:'#000'}}>已对服务员匿名</Text>
          </View>
          <View style={[styles.flexView, { marginVertical: 20 }]}>
            <Image style={styles.imgClass2} source={require('../../../assets/images/waiter.png')} />
            <Text>2024-07-18 17:28:02送达</Text>
          </View>
          <View style={[styles.flexView, { justifyContent: 'space-between' }, styles.mb]}>
            <TouchableOpacity style={styles.btnStyle}>
              <Image style={styles.imgClass} source={require('../../../assets/images/dissatisfaction-grey.png')} />
              <Text style={{ color: '#000' }}>不满意</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnStyle}>
              <Image style={styles.imgClass} source={require('../../../assets/images/satisfaction-grey.png')} />
              <Text style={{ color: '#000' }}>满意</Text>
            </TouchableOpacity>
          </View>
          <View>
            <Text style={[styles.mb, { color: 'red' }]}>"请选择原因，我们会督促服务员"</Text>
            <View style={[styles.flexView, { flexWrap: 'wrap' }, styles.mb]}>
              {data.textArr.map((item) => (
                <Badge marginRight={4} marginBottom={2} colorScheme="coolGray">
                  {item}
                </Badge>
              ))}
            </View>
            <View>
              <TextArea autoCompleteType="off" h={20} placeholder={data.phname} w="100%" onChangeText={(text) => (data.remark = text)} />
            </View>
          </View>
        </View>
        <View style={styles.businessView}>
          <View style={styles.flexView}>
            <Text style={{color:'#000'}}>您对商家满意吗？</Text>
          </View>
          <View style={[styles.flexView, { marginVertical: 10 }]}>
            <Image style={styles.imgClass2} source={require('../../../assets/images/waiter.png')} />
            <Text style={{ color: '#000' }}>小白商户2</Text>
          </View>
          <View style={[styles.flexView,{marginBottom:10}]}>
            <View>
              <Text>评分</Text>
            </View>
            <View >
              <AirbnbRating
                count={5}
                showRating={false}
                defaultRating={data.rateVal}
                size={20}
                onFinishRating={(r) => {
                  data.rateVal = r;
                }}
              />
            </View>
            <View>
              <Text>
                {data.rateVal === 1 && '非常差'}
                {data.rateVal === 2 && '差'}
                {data.rateVal === 3 && '一般'}
                {data.rateVal === 4 && '好'}
                {data.rateVal === 5 && '非常好'}
              </Text>
            </View>
          </View>
          <View>
            <TextArea autoCompleteType="off" h={20} placeholder="提出您的意见，给大家参考" w="100%" onChangeText={(text) => (data.remark = text)} />
          </View>
        </View>
        <View style={styles.btnView}>
          <TouchableOpacity style={styles.submitStyle} disabled>
            <Text style={{ color: '#fff' }}>提 交</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};
const styles = StyleSheet.create({
  main: {
    padding: 10,
  },
  waiterView: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 10,
  },
  businessView: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 10,
    marginTop:10
  },
  btnView: {},
  flexView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  imgClass: {
    width: 40,
    height: 40,
  },
  imgClass2: {
    width: 60,
    height: 60,
  },
  btnStyle: {
    backgroundColor: '#F5F5F5',
    borderRadius: 8,
    width: '46%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  mb: {
    marginBottom: 10,
  },
  submitStyle: {
    backgroundColor: CommonStyle.mainColor,
    width: '100%',
    height: 40,
    marginTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
});
export default OrderEvaluate;
